
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<h1>CSS 网页布局
</h1>
<h2>网页布局</h2>
<p>网页布局有很多种方式，一般分为以下几个部分：<strong>头部区域、菜单导航区域、内容区域、底部区域</strong>。</p>
<p><img decoding="async" src="//www.runoob.com/wp-content/uploads/2019/04/DBD1E737-47C5-445E-BFEC-7547210D88D5.jpg"/></p>
<hr/>
<h2>头部区域</h2>
<p>头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：</p>
<div class="example">
<h2 class="example_head">CSS3 实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">.header</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">background-color:</span><span class="hl-code"> </span><span class="hl-var">#F1F1F1</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">text-align:</span><span class="hl-code"> </span><span class="hl-string">center</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">padding:</span><span class="hl-code"> </span><span class="hl-number">20</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div><hr/>
<h2>菜单导航区域</h2>
<p>菜单导航条包含了一些链接，可以引导用户浏览其他页面：</p>
<div class="example">
<h2 class="example_head">CSS3 实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-comment">/*</span><span class="hl-comment"> 导航条 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-identifier">.topnav</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">overflow:</span><span class="hl-code"> </span><span class="hl-string">hidden</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">background-color:</span><span class="hl-code"> </span><span class="hl-var">#333</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-comment">/*</span><span class="hl-comment"> 导航链接 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-identifier">.topnav</span><span class="hl-code"> </span><span class="hl-identifier">a</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">float:</span><span class="hl-code"> </span><span class="hl-string">left</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">display:</span><span class="hl-code"> </span><span class="hl-string">block</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">color:</span><span class="hl-code"> </span><span class="hl-var">#f2f2f2</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">text-align:</span><span class="hl-code"> </span><span class="hl-string">center</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">padding:</span><span class="hl-code"> </span><span class="hl-number">14</span><span class="hl-string">px</span><span class="hl-code"> </span><span class="hl-number">16</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">text-decoration:</span><span class="hl-code"> </span><span class="hl-string">none</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-comment">/*</span><span class="hl-comment"> 链接 - 修改颜色 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-identifier">.topnav</span><span class="hl-code"> </span><span class="hl-identifier">a</span><span class="hl-special">:hover</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">background-color:</span><span class="hl-code"> </span><span class="hl-var">#ddd</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">color:</span><span class="hl-code"> </span><span class="hl-var">black</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div>
<hr/>
<h2>内容区域</h2>
<p>内容区域一般有三种形式:</p>
<ul><li>
<strong>1 列</strong>：一般用于移动端</li><li>
<strong>2 列</strong>：一般用于平板设备</li><li>
<strong>3 列</strong>：一般用于 PC 桌面设备</li></ul>
<p><img decoding="async" src="//www.runoob.com/wp-content/uploads/2019/04/D105F34E-6592-47AC-A9DF-EEDC1E2172B3.jpg"/></p>
<p>我们将创建一个 3 列布局，在小的屏幕上将会变成 1 列布局（响应式）：</p>
<div class="example">
<h2 class="example_head">CSS3 实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-comment">/*</span><span class="hl-comment"> 创建三个相等的列 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-identifier">.column</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">float:</span><span class="hl-code"> </span><span class="hl-string">left</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">width:</span><span class="hl-code"> </span><span class="hl-number">33.33</span><span class="hl-string">%</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-comment">/*</span><span class="hl-comment"> 列后清除浮动 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-identifier">.row</span><span class="hl-special">:after</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">content:</span><span class="hl-code"> ""</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">display:</span><span class="hl-code"> </span><span class="hl-string">table</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">clear:</span><span class="hl-code"> </span><span class="hl-string">both</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-comment">/*</span><span class="hl-comment"> 响应式布局 - 小于 600 px 时改为上下布局 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-var">@media</span><span class="hl-code"> </span><span class="hl-identifier">screen</span><span class="hl-code"> </span><span class="hl-identifier">and</span><span class="hl-code"> (max-width: 600</span><span class="hl-identifier">px</span><span class="hl-code">) </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-identifier">.column</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">width:</span><span class="hl-code"> </span><span class="hl-number">100</span><span class="hl-string">%</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div>
<blockquote><p><strong>提示:</strong>要设置两列可以设置 width 为 50%。创建 4 列可以设置为 25%。</p>
<p><strong>提示:</strong>如果你想了解更多 @media 的规则可以查看 <a  rel="noopener noreferrer" target="_blank">CSS3 多媒体查询</a>。</p>
<p><strong>提示:</strong> 现在更高级的方式是使用 CSS Flexbox 来创建列的布局，但 Internet Explorer 10 及更早的版本不支持该方式， IE6-10 可以使用浮动方式。
<br/><br/>CSS Flexbox 的更多内容可以查看 <a  rel="noopener noreferrer" target="_blank">CSS3 弹性盒子(Flex Box)</a>。</p></blockquote>
<h3>不相等的列</h3>
<p>不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两次侧可以作为一些导航等相关内容，这三列加起来的宽度是 100％。</p>
<div class="example">
<h2 class="example_head">CSS3 实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">.column</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">float:</span><span class="hl-code"> </span><span class="hl-string">left</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-comment">/*</span><span class="hl-comment"> 左右侧栏的宽度 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-identifier">.column</span><span class="hl-identifier">.side</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">width:</span><span class="hl-code"> </span><span class="hl-number">25</span><span class="hl-string">%</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-comment">/*</span><span class="hl-comment"> 中间列宽度 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-identifier">.column</span><span class="hl-identifier">.middle</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">width:</span><span class="hl-code"> </span><span class="hl-number">50</span><span class="hl-string">%</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-comment">/*</span><span class="hl-comment"> 响应式布局 - 宽度小于600px时设置上下布局 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-var">@media</span><span class="hl-code"> </span><span class="hl-identifier">screen</span><span class="hl-code"> </span><span class="hl-identifier">and</span><span class="hl-code"> (max-width: 600</span><span class="hl-identifier">px</span><span class="hl-code">) </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-identifier">.column</span><span class="hl-identifier">.side</span><span class="hl-code">, </span><span class="hl-identifier">.column</span><span class="hl-identifier">.middle</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">width:</span><span class="hl-code"> </span><span class="hl-number">100</span><span class="hl-string">%</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div>
<hr/>
<h2>底部区域</h2>
<p>底部区域在网页的最下方，一般包含版权信息和联系方式等。</p>
<div class="example">
<h2 class="example_head">CSS3 实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">.footer</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">background-color:</span><span class="hl-code"> </span><span class="hl-var">#F1F1F1</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">text-align:</span><span class="hl-code"> </span><span class="hl-string">center</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">padding:</span><span class="hl-code"> </span><span class="hl-number">10</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div>
<hr/>
<h2>响应式网页布局</h2>
<p>通过以上等学习我们来创建一个响应式等页面，页面的布局会根据屏幕的大小来调整：</p>
<div class="example">
<h2 class="example_head">CSS3 实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">*</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">box-sizing:</span><span class="hl-code"> </span><span class="hl-code">border-box</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-identifier">body</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">font-family:</span><span class="hl-code"> </span><span class="hl-code">Arial</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">padding:</span><span class="hl-code"> </span><span class="hl-number">10</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">background:</span><span class="hl-code"> </span><span class="hl-var">#f1f1f1</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-comment">/*</span><span class="hl-comment"> 头部标题 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-identifier">.header</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">padding:</span><span class="hl-code"> </span><span class="hl-number">30</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">text-align:</span><span class="hl-code"> </span><span class="hl-string">center</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">background:</span><span class="hl-code"> </span><span class="hl-var">white</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-identifier">.header</span><span class="hl-code"> </span><span class="hl-identifier">h1</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">font-size:</span><span class="hl-code"> </span><span class="hl-number">50</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-comment">/*</span><span class="hl-comment"> 导航条 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-identifier">.topnav</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">overflow:</span><span class="hl-code"> </span><span class="hl-string">hidden</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">background-color:</span><span class="hl-code"> </span><span class="hl-var">#333</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-comment">/*</span><span class="hl-comment"> 导航条链接 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-identifier">.topnav</span><span class="hl-code"> </span><span class="hl-identifier">a</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">float:</span><span class="hl-code"> </span><span class="hl-string">left</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">display:</span><span class="hl-code"> </span><span class="hl-string">block</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">color:</span><span class="hl-code"> </span><span class="hl-var">#f2f2f2</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">text-align:</span><span class="hl-code"> </span><span class="hl-string">center</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">padding:</span><span class="hl-code"> </span><span class="hl-number">14</span><span class="hl-string">px</span><span class="hl-code"> </span><span class="hl-number">16</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">text-decoration:</span><span class="hl-code"> </span><span class="hl-string">none</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-comment">/*</span><span class="hl-comment"> 链接颜色修改 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-identifier">.topnav</span><span class="hl-code"> </span><span class="hl-identifier">a</span><span class="hl-special">:hover</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">background-color:</span><span class="hl-code"> </span><span class="hl-var">#ddd</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">color:</span><span class="hl-code"> </span><span class="hl-var">black</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-comment">/*</span><span class="hl-comment"> 创建两列 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-comment">/*</span><span class="hl-comment"> Left column </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-identifier">.leftcolumn</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">float:</span><span class="hl-code"> </span><span class="hl-string">left</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">width:</span><span class="hl-code"> </span><span class="hl-number">75</span><span class="hl-string">%</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-comment">/*</span><span class="hl-comment"> 右侧栏 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-identifier">.rightcolumn</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">float:</span><span class="hl-code"> </span><span class="hl-string">left</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">width:</span><span class="hl-code"> </span><span class="hl-number">25</span><span class="hl-string">%</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">background-color:</span><span class="hl-code"> </span><span class="hl-var">#f1f1f1</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">padding-left:</span><span class="hl-code"> </span><span class="hl-number">20</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-comment">/*</span><span class="hl-comment"> 图像部分 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-identifier">.fakeimg</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">background-color:</span><span class="hl-code"> </span><span class="hl-var">#aaa</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">width:</span><span class="hl-code"> </span><span class="hl-number">100</span><span class="hl-string">%</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">padding:</span><span class="hl-code"> </span><span class="hl-number">20</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-comment">/*</span><span class="hl-comment"> 文章卡片效果 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-identifier">.card</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">background-color:</span><span class="hl-code"> </span><span class="hl-var">white</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">padding:</span><span class="hl-code"> </span><span class="hl-number">20</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">margin-top:</span><span class="hl-code"> </span><span class="hl-number">20</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-comment">/*</span><span class="hl-comment"> 列后面清除浮动 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-identifier">.row</span><span class="hl-special">:after</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">content:</span><span class="hl-code"> ""</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">display:</span><span class="hl-code"> </span><span class="hl-string">table</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">clear:</span><span class="hl-code"> </span><span class="hl-string">both</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-comment">/*</span><span class="hl-comment"> 底部 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-identifier">.footer</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">padding:</span><span class="hl-code"> </span><span class="hl-number">20</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">text-align:</span><span class="hl-code"> </span><span class="hl-string">center</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">background:</span><span class="hl-code"> </span><span class="hl-var">#ddd</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-reserved">margin-top:</span><span class="hl-code"> </span><span class="hl-number">20</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-comment">/*</span><span class="hl-comment"> 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-var">@media</span><span class="hl-code"> </span><span class="hl-identifier">screen</span><span class="hl-code"> </span><span class="hl-identifier">and</span><span class="hl-code"> (max-width: 800</span><span class="hl-identifier">px</span><span class="hl-code">) </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-identifier">.leftcolumn</span><span class="hl-code">, </span><span class="hl-identifier">.rightcolumn</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">width:</span><span class="hl-code"> </span><span class="hl-number">100</span><span class="hl-string">%</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">padding:</span><span class="hl-code"> </span><span class="hl-number">0</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-comment">/*</span><span class="hl-comment"> 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 </span><span class="hl-comment">*/</span><span class="hl-code">
</span><span class="hl-var">@media</span><span class="hl-code"> </span><span class="hl-identifier">screen</span><span class="hl-code"> </span><span class="hl-identifier">and</span><span class="hl-code"> (max-width: 400</span><span class="hl-identifier">px</span><span class="hl-code">) </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-identifier">.topnav</span><span class="hl-code"> </span><span class="hl-identifier">a</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">float:</span><span class="hl-code"> </span><span class="hl-string">none</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">width:</span><span class="hl-code"> </span><span class="hl-number">100</span><span class="hl-string">%</span><span class="hl-reserved"></span><span class="hl-code">;
  </span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  rel="noopener noreferrer" target="_blank">尝试一下 »</a>
</div> <div class="scroll-top"><a >返回顶部</a></div>
</div>

    </body>
    </html>
    